<template>
  <div class="home-container">
    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1>羽你有约</h1>
        <p>羽毛球爱好者的专属社区，一起享受运动的乐趣</p>
        <div class="hero-buttons">
          <button class="primary-btn" @click="goToCommunity">进入社区</button>
          <button class="secondary-btn" @click="goToRetail">选购装备</button>
        </div>
      </div>
    </section>

    <!-- 功能区域 -->
    <section class="features-section">
      <div class="section-header">
        <h2>我们的功能</h2>
        <p>一站式羽毛球服务平台，满足您的所有需求</p>
      </div>

      <div class="features-grid">
          <div class="feature-card" @click="goToCommunity">
            <div class="feature-icon">
              <i class="icon">💬</i>
            </div>
            <h3>交流社区</h3>
            <p>与全国各地的羽毛球爱好者交流经验、分享技巧</p>
          </div>

          <div class="feature-card" @click="goToRetail">
            <div class="feature-icon">
              <i class="icon">🛒</i>
            </div>
            <h3>装备商城</h3>
            <p>精选优质羽毛球装备，满足不同水平玩家需求</p>
          </div>

          <div class="feature-card" @click="goToSecondHand">
            <div class="feature-icon">
              <i class="icon">🔄</i>
            </div>
            <h3>二手交易</h3>
            <p>安全便捷的羽毛球装备二手交易平台</p>
          </div>

          <div class="feature-card" @click="goToCourtBooking">
            <div class="feature-icon">
              <i class="icon">🏸</i>
            </div>
            <h3>场地预约</h3>
            <p>轻松预约附近羽毛球场地，随时享受运动乐趣</p>
          </div>

          <div class="feature-card" @click="goToPlayingAppointment">
            <div class="feature-icon">
              <i class="icon">👥</i>
            </div>
            <h3>约球活动</h3>
            <p>寻找球友，组织活动，一起切磋球技</p>
          </div>

          <div class="feature-card" @click="goToVideoTutorials">
            <div class="feature-icon">
              <i class="icon">🎥</i>
            </div>
            <h3>视频教学</h3>
            <p>专业教练指导，提升您的羽毛球技术水平</p>
          </div>

          <!-- 新增导航栏功能 -->
          <div class="feature-card" @click="goToNews">
            <div class="feature-icon">
              <i class="icon">📰</i>
            </div>
            <h3>新闻资讯</h3>
            <p>最新羽毛球赛事报道和行业动态</p>
          </div>

          <div class="feature-card" @click="goToPoints">
            <div class="feature-icon">
              <i class="icon">🎖️</i>
            </div>
            <h3>积分商城</h3>
            <p>参与活动获取积分，兑换精美礼品和服务</p>
          </div>

          <div class="feature-card" @click="goToCoaching">
            <div class="feature-icon">
              <i class="icon">👨‍🏫</i>
            </div>
            <h3>教练团队</h3>
            <p>专业羽毛球教练团队，提供个性化指导</p>
          </div>

          <div class="feature-card" @click="goToMatchReplays">
            <div class="feature-icon">
              <i class="icon">🎥</i>
            </div>
            <h3>赛事回放</h3>
            <p>精彩羽毛球赛事录像回放，重温经典瞬间</p>
          </div>

          <div class="feature-card" @click="goToReviews">
            <div class="feature-icon">
              <i class="icon">⭐</i>
            </div>
            <h3>装备评测</h3>
            <p>专业羽毛球装备评测，助您选择最合适的装备</p>
          </div>

          <div class="feature-card" @click="goToEquipmentAuth">
            <div class="feature-icon">
              <i class="icon">🔍</i>
            </div>
            <h3>装备鉴定</h3>
            <p>专业羽毛球装备鉴定服务，确保正品保障</p>
          </div>
        </div>
    </section>

    <!-- 新闻资讯区域 -->
    <section class="news-section">
      <div class="section-header">
        <h2>最新资讯</h2>
        <button class="view-all-btn" @click="goToNews">查看全部</button>
      </div>

      <div class="news-grid">
        <div class="news-card" v-for="item in featuredNews" :key="item.id">
          <div class="news-image">
            <img :src="item.imageUrl" :alt="item.title">
          </div>
          <div class="news-content">
            <div class="news-category">{{ item.category }}</div>
            <h3 class="news-title">{{ item.title }}</h3>
            <div class="news-date">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 会员积分区域 -->
    <section class="membership-section">
      <div class="membership-content">
        <div class="membership-info">
          <h2>会员积分体系</h2>
          <p>参与活动、购买商品即可获得积分，积分可兑换精美礼品和专属服务</p>
          <button class="membership-btn" @click="goToPoints">了解更多</button>
        </div>
        <div class="membership-image">
          <img src="https://images.unsplash.com/photo-1574623455123-0995946d1a7f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="会员积分">
        </div>
      </div>
    </section>
  </div>
  <!-- 底部导航栏 -->
  <footer class="footer-section">
    <div class="footer-container">
      <div class="footer-columns">
        <div class="footer-column">
          <h3>关于我们</h3>
          <ul>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">招贤纳士</a></li>
            <li><a href="#">新闻中心</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>产品服务</h3>
          <ul>
            <li><a href="#">羽毛球社区</a></li>
            <li><a href="#">装备商城</a></li>
            <li><a href="#">场地预约</a></li>
            <li><a href="#">约球活动</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>帮助中心</h3>
          <ul>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">会员政策</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">用户协议</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>关注我们</h3>
          <div class="social-icons">
            <a href="#" class="social-icon">微信</a>
            <a href="#" class="social-icon">微博</a>
            <a href="#" class="social-icon">抖音</a>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>© 2025 羽你有约 版权所有 | 京ICP备12345678号</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 精选新闻数据
const featuredNews = ref([
  {
    id: 1,
    title: '2023年全国羽毛球锦标赛即将开赛',
    category: '赛事新闻',
    date: '2023-10-15',
    imageUrl: 'https://images.unsplash.com/photo-1574623455123-0995946d1a7f?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 2,
    title: '羽毛球拍选购指南：如何选择适合自己的球拍',
    category: '装备知识',
    date: '2023-10-10',
    imageUrl: 'https://images.unsplash.com/photo-1551361415-012e42a34764?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 3,
    title: '专业教练分享：提高羽毛球反手技术的5个技巧',
    category: '技术教学',
    date: '2023-10-05',
    imageUrl: 'https://images.unsplash.com/photo-1581368074604-551406c67a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  }
]);

// 页面跳转方法
const goToCommunity = () => {
  router.push('/community');
};

const goToRetail = () => {
  router.push('/retail');
};

const goToSecondHand = () => {
  router.push('/second-hand');
};

const goToCourtBooking = () => {
  router.push('/court-booking');
};

const goToPlayingAppointment = () => {
  router.push('/playing-appointment');
};

const goToVideoTutorials = () => {
  router.push('/video-tutorials');
}

// 新增导航功能跳转方法

const goToCoaching = () => {
  router.push('/coaching');
}

const goToMatchReplays = () => {
  router.push('/match-replays');
}

const goToReviews = () => {
  router.push('/reviews');
}

const goToEquipmentAuth = () => {
  router.push('/equipment-auth');
};

const goToNews = () => {
  router.push('/news');
};

const goToPoints = () => {
  router.push('/points');
};
</script>

<style scoped>
.home-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* 英雄区域 */
.hero-section {
  background: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
  color: white;
  padding: 5rem 2rem;
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin: 0 0 1rem 0;
}

.hero-content p {
  font-size: 1.2rem;
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.primary-btn {
  background-color: white;
  color: #2196F3;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

.secondary-btn {
  background-color: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid white;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

/* 功能区域 */
.features-section {
  padding: 4rem 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  color: #333;
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
}

.section-header p {
  color: #666;
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background-color: white;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.5rem auto;
}

.icon {
  font-size: 1.5rem;
  color: white;
}

.feature-card h3 {
  color: #333;
  margin: 0 0 1rem 0;
}

.feature-card p {
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* 新闻资讯区域 */
.news-section {
  padding: 4rem 2rem;
  background-color: #f9f9f9;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.view-all-btn {
  background: none;
  border: 1px solid #2196F3;
  color: #2196F3;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.news-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-3px);
}

.news-image {
  height: 180px;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 1.5rem;
}

.news-category {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background-color: #e3f2fd;
  color: #2196F3;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}

.news-title {
  color: #333;
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.news-date {
  color: #777;
  font-size: 0.9rem;
}

/* 会员积分区域 */

/* 底部导航栏样式 */
.footer-section {
  background-color: #e8e8e8;
  color: #000000;
  padding: 4rem 2rem 2rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column h3 {
  font-size: 1.2rem;
  margin: 0 0 1.5rem 0;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #2196F3;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.8rem;
}

.footer-column a {
  color: #000000;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #fff;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: white;
  text-decoration: none;
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #b0b0b0;
  font-size: 0.9rem;
}

/* 会员积分区域 */
.membership-section {
  padding: 4rem 2rem;
}

.membership-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.membership-info h2 {
  color: #333;
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
}

.membership-info p {
  color: #666;
  margin: 0 0 2rem 0;
  line-height: 1.6;
  font-size: 1.1rem;
}

.membership-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.membership-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 992px) {
  .membership-content {
    grid-template-columns: 1fr;
  }
  .membership-image {
    order: -1;
  }
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .features-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
  .section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
</style>